<template>
	<view class="addAddress-mod">
		<view class="addAddress-mod-pad">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<view class="addAddress-mod-item flex">
					<uni-forms-item label="联系人" name="name" class="fz gray">
						<uni-easyinput type="text" value="" :inputBorder='false' placeholder="请填写联系人姓名" v-model="formData.name" />
					</uni-forms-item>
				</view>
				<view class="addAddress-mod-item flex">
					<text></text>
					<radio-group class="address-radio-check">
						<label class="radio">
							<radio value="" /><text>先生</text>
						</label>
						<label class="radio">
							<radio value="" /><text>女士</text>
						</label>
					</radio-group>
				</view>
				<view class="addAddress-mod-item flex">
					<uni-forms-item label="手机号" name="phone" class="fz gray">
						<uni-easyinput type="text" value="" :inputBorder='false' placeholder="请填写联系人手机号码" v-model="formData.phone" />
					</uni-forms-item>
				</view>
				<view class="addAddress-mod-item flex">
					<uni-forms-item label="服务地址" name="address" class="fz gray">
						<uni-easyinput type="text" value="" :inputBorder='false' placeholder="请选择" v-model="formData.address" />
					</uni-forms-item>

				</view>
				<view class="addAddress-mod-item flex">
					<uni-forms-item label="门牌号" name="houseNumber" class="fz gray">
						<uni-easyinput type="text" value="" :inputBorder='false' placeholder="例: 16号楼5层301室"
							v-model="formData.houseNumber" />
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="save-address center" @click="savaAddressClick">
			保存地址
		</view>
	</view>
</template>

<script>
	export default {
		name: 'indentAddAddress',
		onLoad(obj) {
			if (obj !== null) {
				this.id = Number(obj.id)
				uni.setNavigationBarTitle({
					title: obj.title
				})
			}
		},
		data() {
			return {
				id: 0,
				formData: {
					name: '',
					phone: '',
					address: '',
					houseNumber: '',
				},
				addressDalist: [],
				value: '',
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 1,
								maxLength: 12,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}, {
								validateFunction: function(rule, value, data, callback) {
									const r =
										/((^[\u4E00-\u9FA5]{1,12}$)|(^[a-zA-Z]+[\s\.]?([a-zA-Z]+[\s\.]?){0,4}[a-zA-Z]$))/
									if (value.replace(r, '')) {
										callback('请输入中文')
									}
									return true
								}
							}
						]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '手机号码位数应为11位,请重新输入',
							}, {
								validateFunction: function(rule, value, data, callback) {
									const r =
										/^[0-9]*$/
									if (value.replace(r, '')) {
										callback('请输入数字')
									}
									return true
								}
							}
						]
					},
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入服务地址',
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '请输入正确的地址',
							}
						]
					},
					houseNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入详细地址',
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '请输入正确的地址',
							}
						]
					},
				}
			}
		},
		mounted() {
			this.addressDalist = JSON.parse(localStorage.getItem('address'))
		},
		computed: {

		},
		methods: {
			savaAddressClick() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				this.addressDalist.push(this.formData)
				localStorage.setItem('address', JSON.stringify(this.addressDalist));
				uni.navigateTo({
					url: '/pages/indent/indent?title=确认订单&id=' + this.id
				})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.addAddress-mod {
		height: 100vh;
		background-color: #dfe2e7;

		.addAddress-mod-pad {
			background-color: #fff;
			padding: 40rpx 20rpx;

			.addAddress-mod-item {
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1px solid #ebeef3;

				.address-radio-check {
					width: 80%;
					font-size: 24rpx;
				}

				.address-radio-check {
					label {
						&:nth-child(1) {
							margin-right: 80rpx;
						}
					}
				}
			}
		}

		.save-address {
			color: #fff;
			margin: 35rpx 15rpx;
			background-color: #59b195;
			padding: 15rpx 0;
			border-radius: 15px;
			border: 1px solid #59b195;
		}
	}
	
</style>
